<template>
  <div class="filter-result-list">
    <mt-button
      v-show="filter.price"
      type="default"
      class="filter mint-toast-icon mintui mintui-field-error"
      @click.native="clearPrice"
    >{{filter.price}}万</mt-button>
    <mt-button
      v-if="filter.model"
      type="default"
      class="filter mint-toast-icon mintui mintui-field-error"
      @click.native="clearModel"
    >{{filter.model.title}}</mt-button>
    <mt-button v-for="(item, i) in filter.type" :key="i"
      v-if="item"
      type="default"
      class="filter mint-toast-icon mintui mintui-field-error"
      @click.native="clearType(item)"
    >{{item.title}}</mt-button>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: [""],
  data() {
    return {};
  },

  computed: {
    filter() {
      return this.$store.getters.filter;
    }
  },

  methods: {
    clearModel() {
      this.filter.model= null
      this.$store.commit('UPDATE_FILTER', this.filter)
    },
    clearPrice() {
      this.filter.price= null
      this.$store.commit('UPDATE_FILTER', this.filter)
    },

    clearType(data) {
      this.filter.type.splice(this.filter.type.findIndex(item => item.id === data.id), 1)
      this.$store.commit('UPDATE_FILTER', this.filter)
    }
  }
};
</script>
<style lang='scss' scoped>
.filter-result-list {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f7fa;
  padding: .1rem .2rem;
}
.filter {
  height: 0.24rem;
  font-size: .12rem;
  color: #666;
  line-height: 0.24rem;
  text-align: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  margin-right: .1rem;
}
</style>